<template>
	<view class="map">
		<map 
			style="width: 100%; height: 90vh;" 
			:layer-style='5'   
			:show-location='true'  
			:latitude="latitude" 
			:longitude="longitude" 
			:markers="marker" 
			:scale="scale"  
			@markertap="markertap"   
			@callouttap='callouttap'>
			<template v-for="item in marker"> 
				<cover-view slot="callout" :key="item.id">
				    <cover-view class="item" :marker-id="item.id" style="color: blue;">
						<image class="img" src="https://img1.baidu.com/it/u=3569420573,2690721824&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"></image>
						<view class="right">
							<text class="name">福特野马</text>
							<text class="subtitle">自动挡</text>
							<text class="price">178元/天</text>
						</view>
					</cover-view>
				</cover-view>
			</template>
		</map>
	</view>
</template>

<script>
export default {
	data() {
		return {
			latitude:23.106574, //纬度
			longitude:113.324587,//经度
			scale:13,//缩放级别
			bottomData:false,
			marker: [
				{
					id:0,
					latitude: 23.13065,//纬度
					longitude: 113.3274,//经度
					iconPath: '',    //显示的图标        
					rotate:0,   // 旋转度数
					width:20,   //宽
					height:30,   //高
					alpha:0.5,   //透明度
					// callout:{
					// 	content:'天宝大厦',//文本
					// 	color:'#ffffff',//文字颜色
					// 	fontSize:14,//文本大小
					// 	borderRadius:15,//边框圆角
					// 	borderWidth:'10',
					// 	bgColor:'#e51860',//背景颜色
					// 	display:'ALWAYS',//常显
					// }
					customCallout: {
						anchorX:5,
						anchorY:45,
						display: "ALWAYS",
				  },
				}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.map {
	.item {
		width: 500rpx;
		height: 150rpx;
		background: rgba(white, 0.8);
		border-radius: 16rpx;
		display: flex;
		.img {
			width: 200rpx;
			height: 100%;
		}
		.right {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			color: orange;
			margin-left: 10rpx;
			.name {
				margin-top: 16rpx;
			}
			.subTitle {
				margin-top: 10rpx;
			}
		}
		.price {
			margin-top: 30rpx;
		}
	}
}
</style>
